<template>
  <ul class="movie-list" v-if="comingList">
    <li
      class="movie-item"
      v-for="(item, index) in comingList"
      :key="index"
      @click="toDetial(item.filmId, item.isPresale)"
    >
      <img class="poster" :src="item.poster" alt="" />
      <div class="info">
        <span class="name">{{ item.name }}</span>
        <div class="actors">
          <span>主演：{{ item.actors | actorsFilter }}</span>
        </div>
        <p class="pfen">
          上映时间：{{ (item.premiereAt * 1000) | timeFormat() }}
        </p>
      </div>
      <div class="buybox">
        <button class="buy">预购</button>
      </div>
    </li>
  </ul>
</template>

<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import Vue from "vue";
import { Dialog, Button } from "vant";
Vue.use(Button);

export default {
  computed: {
    ...mapState(["comingList", "isBottom"]),
  },

  filters: {
    actorsFilter(data) {
      return data.map((val) => val.name).join(" ");
    },
    timeFormat(val, format = "YYYY-MM-DD HH:mm:ss dddd") {
      // return moment(val).format("MM月DD日");
      moment.locale("zh-cn");
      return moment(val).format("dddd MM月DD日");
    },
  },
  methods: {
    ...mapActions(["getComingListAction"]),
    toDetial(id, isPresale) {
      if (isPresale) {
        // vant确认弹窗
        Dialog.confirm({
          message: "该影片目前没有排期，到首页看其他电影吧",
        })
          .then(() => {
            this.$router.push("/movies/NowPlaying");
          })
          .catch(() => {
            this.$router.push("/detail/" + id);
          });
      } else {
        this.$router.push("/detail/" + id);
      }
    },
    scrollEndGetMore() {
      if (!this.isBottom) {
        this.$store.dispatch("getComingListAction");
        console.log("加载更更多");
      } else {
        console.log("已到底");
      }
    },
  },
  mounted() {
    // 如果store中没有数据，则通过active异步请求数据保存到store中；如果store有数据则还是使用缓存中的数据
    if (this.comingList.length === 0) {
      // 【1】$store.dispatch('active事件名')发到active
      this.$store.dispatch("getComingListAction");
    } else {
      console.log("使用缓存数据");
    }
  },
};
</script>

<style scoped  lang="less" >
.movie-item {
  padding: 15px;
  display: flex;
  background-color: #fff;
  color: #797d82;
  border-bottom: 1px solid #f1e9e9;
  .poster {
    width: 66px;
    height: 92.52px;
  }
  .info {
    padding: 10px;
    width: 180px;
    font-size: 16px;
    .name {
      max-width: calc(100% - 25px);
      color: #191a1b;
      font-size: 16px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      overflow: hidden;
      white-space: nowrap;
    }
    .pfen {
      font-size: 13px;
      margin-top: 4px;
      color: #797d82;
    }
    .actors {
      width: 225px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
  }
  .buybox {
    position: relative;
    left: 30px;
    top: -15px;
    .buy {
      width: 50px;
      height: 25px;
      margin-top: 50px;
      border: 1px solid #ffb96d;
      border-radius: 4px;
      background-color: #ffffff;
      color: #ffb96d;
    }
  }
}
</style>